<template>
  <el-dialog title="图库"
             width="80%"
             :close-on-click-modal="false"
             :visible.sync="imgVisible">
    <div style="margin:0 auto;">
      <el-upload class="upload-demo"
                 :before-upload="onBeforeUpload"
                 :on-success="onSuccess"
                 :show-file-list="false"
                 :action="$website.url+'/visual/put-file'"
                 multiple
                 :headers="headers"
                 :data="uploadParams"
                 list-type="picture">
        <el-button size="small"
                   icon="el-icon-upload"
                   type="primary">点击上传</el-button>
      </el-upload>
    </div>
    <el-tabs class="project-config" v-model="activeImgTab" @tab-click="handleChange">
      <el-tab-pane label="系统" name="system">
        <el-scrollbar class="imgList">
          <img :src="item.value"
               :style="styleName"
               @click="handleSetimg(item.value)"
               v-for="(item,index) in imgOption[imgActive]"
               :key="index" />
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="自定义" name="users">
        <el-scrollbar class="imgList">
          <img :src="item.value"
               :style="styleName"
               @click="handleSetimg(item.value,true)"
               v-for="(item,index) in userImages[imgActive]"
               :key="index" />
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="大屏" name="visual">
        <el-scrollbar class="imgList">
          <img :src="item.value"
               :style="styleName"
               @click="handleSetimg(item.value,true)"
               v-for="(item,index) in visualImages[imgActive]"
               :key="index" />
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>

  </el-dialog>
</template>

<script>
import { imgOption } from '@/option/config'
import { DRAG_TOKEN} from "@/store/mutation-types"
import cookies from "vue-cookies";
import {getImages} from "@/api/visual";
export default {
  inject: ["main"],
  props:{
    visualId: String,
    projectId: String
  },
  data () {
    return {
      activeImgTab: 'system',
      imgVisible: false,
      imgObj: '',
      type: '',
      imgActive: 0,
      imgOption: imgOption,
      imgTabs: [],
      userImages: {
        0:[],
        1:[],
        2:[],
        3:[],
        4:[]
      },
      visualImages:{
        0:[],
        1:[],
        2:[],
        3:[],
        4:[]
      },
    }
  },
  mounted() {
  },

  computed: {
    styleName () {
      if (this.type === 'background') {
        return {
          width: '200px'
        }
      }
      return {}
    },
    headers() {
      return {
        'drag-token': cookies.get(DRAG_TOKEN)
      }
    },
    hasConfigImages(){
      return this.main.config.images
    },
    uploadParams(){
      return{
        visualId: this.visualId,
        projectId: this.projectId,
        type: this.imgActive
      }
    }
  },
  watch: {
    type: {
      handler () {
        if (this.type === 'background') {
          this.imgActive = 0;
        } else if (this.type === 'border') {
          this.imgActive = 1;
        }else if (this.type === 'banner') {
          this.imgActive = 3;
        }  else {
          this.imgActive = 2;
        }
        this.queryUserImages()
      },
      immediate: true
    },
    visualImages:{
      handler (images){
        this.main.config.images = images
      },
      deep: true
    },
    hasConfigImages:{
      handler (val){
        if(val){
          this.visualImages =this.main.config.images
        }
      }
    }
  },
  methods: {
    onSuccess (res) {
      const url = res.data.link;
      const image ={
        label: url,
        value: $website.url+url
      }
      this.userImages[this.imgActive].push(image);
      this.visualImages[this.imgActive].push(image);
    },
    openImg (item, type) {
      this.type = type;
      this.imgObj = item
      this.imgVisible = true;
    },
    handleSetimg (item) {
      this.imgVisible = false;
      this.$emit('change', item, this.imgObj);
    },
    handleChange: function (tab,event){
      this.activeImgTab = tab.name
    },
    onBeforeUpload: function (){
      this.activeImgTab = 'users'
      return true
    },
    queryUserImages(){
      this.userImages[this.imgActive] = []
      getImages({
        visualId: this.visualId,
        projectId: this.projectId,
        type: this.imgActive
      }).then(res =>{
        if(res.data.code === 0){
          const  images =res .data.data
          for (const  image of images){
            const one ={
              label: image.name,
              value: $website.url+image.link
            }
            this.userImages[this.imgActive].push(one)
          }
        }
      })
    }
  }
}
</script>

<style>
</style>
